<template>
  <view class="alarm-setting-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">
        <u-icon name="arrow-left" size="20" color="#333" @click="goBack"></u-icon>
        <text class="title-text">报警设置</text>
      </view>
      <view class="header-actions">
        <u-button 
          type="primary" 
          size="small" 
          text="添加规则" 
          @click="showAddRuleModal = true"
        ></u-button>
      </view>
    </view>

    <!-- 报警统计 -->
    <view class="alarm-stats">
      <view class="stat-card">
        <view class="stat-number">{{ alarmStats.total }}</view>
        <view class="stat-label">总报警数</view>
      </view>
      <view class="stat-card">
        <view class="stat-number">{{ alarmStats.active }}</view>
        <view class="stat-label">活跃规则</view>
      </view>
      <view class="stat-card">
        <view class="stat-number">{{ alarmStats.today }}</view>
        <view class="stat-label">今日报警</view>
      </view>
    </view>

    <!-- 报警规则列表 -->
    <view class="alarm-rules">
      <view class="section-title">报警规则</view>
      <view class="rules-list">
        <view 
          v-for="rule in alarmRules" 
          :key="rule.id"
          class="rule-item"
        >
          <view class="rule-header">
            <view class="rule-name">{{ rule.name }}</view>
            <u-switch 
              v-model="rule.enabled" 
              @change="toggleRule(rule)"
            ></u-switch>
          </view>
          <view class="rule-desc">{{ rule.description }}</view>
          <view class="rule-details">
            <view class="detail-item">
              <text class="detail-label">触发条件：</text>
              <text class="detail-value">{{ rule.condition }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">通知方式：</text>
              <text class="detail-value">{{ rule.notificationType }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">优先级：</text>
              <u-tag 
                :text="rule.priorityText" 
                :type="getPriorityType(rule.priority)"
                size="small"
              ></u-tag>
            </view>
          </view>
          <view class="rule-actions">
            <u-button 
              type="warning" 
              size="mini" 
              text="编辑" 
              @click="editRule(rule)"
            ></u-button>
            <u-button 
              type="error" 
              size="mini" 
              text="删除" 
              @click="deleteRule(rule)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 通知设置 -->
    <view class="notification-settings">
      <view class="section-title">通知设置</view>
      <view class="settings-list">
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">短信通知</view>
            <view class="setting-desc">通过短信接收报警信息</view>
          </view>
          <u-switch 
            v-model="notificationSettings.sms" 
            @change="updateNotificationSetting('sms')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">微信通知</view>
            <view class="setting-desc">通过微信接收报警信息</view>
          </view>
          <u-switch 
            v-model="notificationSettings.wechat" 
            @change="updateNotificationSetting('wechat')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">APP推送</view>
            <view class="setting-desc">通过APP接收报警推送</view>
          </view>
          <u-switch 
            v-model="notificationSettings.app" 
            @change="updateNotificationSetting('app')"
          ></u-switch>
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">邮件通知</view>
            <view class="setting-desc">通过邮件接收报警信息</view>
          </view>
          <u-switch 
            v-model="notificationSettings.email" 
            @change="updateNotificationSetting('email')"
          ></u-switch>
        </view>
      </view>
    </view>

    <!-- 添加规则弹窗 -->
    <u-popup 
      :show="showAddRuleModal" 
      mode="center" 
      :round="10"
      @close="showAddRuleModal = false"
    >
      <view class="add-rule-modal">
        <view class="modal-header">
          <text class="modal-title">添加报警规则</text>
          <u-icon name="close" size="20" @click="showAddRuleModal = false"></u-icon>
        </view>
        <view class="modal-content">
          <u-form :model="newRule" ref="ruleFormRef">
            <u-form-item label="规则名称" prop="name">
              <u-input v-model="newRule.name" placeholder="请输入规则名称"></u-input>
            </u-form-item>
            <u-form-item label="规则描述" prop="description">
              <u-input v-model="newRule.description" placeholder="请输入规则描述"></u-input>
            </u-form-item>
            <u-form-item label="触发条件" prop="condition">
              <u-input v-model="newRule.condition" placeholder="请输入触发条件"></u-input>
            </u-form-item>
            <u-form-item label="通知方式" prop="notificationType">
              <u-input v-model="newRule.notificationType" placeholder="请输入通知方式"></u-input>
            </u-form-item>
            <u-form-item label="优先级" prop="priority">
              <u-picker
                :show="showPriorityPicker"
                :columns="[priorityOptions]"
                @confirm="onPriorityConfirm"
                @cancel="showPriorityPicker = false"
              ></u-picker>
              <u-input 
                v-model="newRule.priorityText" 
                placeholder="请选择优先级" 
                readonly 
                @click="showPriorityPicker = true"
              ></u-input>
            </u-form-item>
          </u-form>
        </view>
        <view class="modal-actions">
          <u-button type="info" text="取消" @click="showAddRuleModal = false"></u-button>
          <u-button type="primary" text="添加" @click="addRule"></u-button>
        </view>
      </view>
    </u-popup>

    <!-- 优先级选择器 -->
    <u-picker
      :show="showPriorityPicker"
      :columns="[priorityOptions]"
      @confirm="onPriorityConfirm"
      @cancel="showPriorityPicker = false"
    ></u-picker>
  </view>
</template>

<script setup>
/**
 * 报警设置页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 报警设置功能，包含报警规则、通知设置等
 */

import { ref, reactive, onMounted } from 'vue'

// 页面状态
const showAddRuleModal = ref(false)
const showPriorityPicker = ref(false)

// 报警统计
const alarmStats = reactive({
  total: 0,
  active: 0,
  today: 0
})

// 报警规则列表
const alarmRules = ref([
  {
    id: 1,
    name: '门禁异常开启',
    description: '检测门禁在非正常时间开启',
    condition: '门禁开启时间不在6:00-23:00范围内',
    notificationType: '短信+APP推送',
    priority: 1,
    priorityText: '高',
    enabled: true
  },
  {
    id: 2,
    name: '监控设备离线',
    description: '检测监控设备连接状态',
    condition: '监控设备超过5分钟无响应',
    notificationType: '微信+APP推送',
    priority: 2,
    priorityText: '中',
    enabled: true
  },
  {
    id: 3,
    name: '异常人员进入',
    description: '检测未授权人员进入',
    condition: '人脸识别失败次数超过3次',
    notificationType: '短信+微信+APP推送',
    priority: 1,
    priorityText: '高',
    enabled: false
  },
  {
    id: 4,
    name: '车辆异常停放',
    description: '检测车辆在非指定区域停放',
    condition: '车辆停放超过2小时且不在车位内',
    notificationType: 'APP推送',
    priority: 3,
    priorityText: '低',
    enabled: true
  }
])

// 通知设置
const notificationSettings = reactive({
  sms: true,
  wechat: true,
  app: true,
  email: false
})

// 新规则表单
const newRule = reactive({
  name: '',
  description: '',
  condition: '',
  notificationType: '',
  priority: 2,
  priorityText: '中'
})

// 优先级选项
const priorityOptions = [
  { label: '高', value: 1 },
  { label: '中', value: 2 },
  { label: '低', value: 3 }
]

// 方法
const goBack = () => {
  uni.navigateBack()
}

const toggleRule = (rule) => {
  const status = rule.enabled ? '启用' : '禁用'
  uni.showToast({
    title: `${rule.name}已${status}`,
    icon: 'success'
  })
  
  // 更新统计
  updateAlarmStats()
}

const editRule = (rule) => {
  uni.showToast({
    title: `编辑规则：${rule.name}`,
    icon: 'none'
  })
}

const deleteRule = (rule) => {
  uni.showModal({
    title: '删除确认',
    content: `确定要删除报警规则"${rule.name}"吗？`,
    success: (res) => {
      if (res.confirm) {
        const index = alarmRules.value.findIndex(r => r.id === rule.id)
        if (index > -1) {
          alarmRules.value.splice(index, 1)
          updateAlarmStats()
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
        }
      }
    }
  })
}

const updateNotificationSetting = (type) => {
  const status = notificationSettings[type] ? '启用' : '禁用'
  const typeText = {
    sms: '短信通知',
    wechat: '微信通知',
    app: 'APP推送',
    email: '邮件通知'
  }[type]
  
  uni.showToast({
    title: `${typeText}已${status}`,
    icon: 'success'
  })
}

const onPriorityConfirm = (event) => {
  const selected = event.value[0]
  newRule.priority = selected.value
  newRule.priorityText = selected.label
  showPriorityPicker.value = false
}

const addRule = () => {
  // 表单验证
  if (!newRule.name || !newRule.description || !newRule.condition || !newRule.notificationType) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none'
    })
    return
  }

  // 创建新规则
  const rule = {
    id: Date.now(),
    name: newRule.name,
    description: newRule.description,
    condition: newRule.condition,
    notificationType: newRule.notificationType,
    priority: newRule.priority,
    priorityText: newRule.priorityText,
    enabled: true
  }

  // 添加到列表
  alarmRules.value.unshift(rule)
  
  // 更新统计
  updateAlarmStats()
  
  // 重置表单
  Object.assign(newRule, {
    name: '',
    description: '',
    condition: '',
    notificationType: '',
    priority: 2,
    priorityText: '中'
  })
  
  // 关闭弹窗
  showAddRuleModal.value = false
  
  // 显示成功提示
  uni.showToast({
    title: '规则添加成功',
    icon: 'success'
  })
}

const getPriorityType = (priority) => {
  const typeMap = {
    1: 'error',
    2: 'warning',
    3: 'info'
  }
  return typeMap[priority] || 'info'
}

const updateAlarmStats = () => {
  alarmStats.total = alarmRules.value.length
  alarmStats.active = alarmRules.value.filter(rule => rule.enabled).length
  alarmStats.today = Math.floor(Math.random() * 5) + 1 // 模拟今日报警数
}

// 页面加载
onMounted(() => {
  updateAlarmStats()
  console.log('报警设置页面加载完成')
})
</script>

<style lang="scss" scoped>
.alarm-setting-page {
  min-height: 100vh;
  width: 100vw;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-header {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  
  .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
}

.alarm-stats {
  background: white;
  padding: 16px;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  
  .stat-card {
    flex: 1;
    text-align: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .stat-number {
      font-size: 24px;
      font-weight: 600;
      color: #ff4757;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}

.alarm-rules {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  .rules-list {
    .rule-item {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .rule-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .rule-name {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .rule-desc {
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
      }
      
      .rule-details {
        margin-bottom: 12px;
        
        .detail-item {
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          
          .detail-label {
            font-size: 12px;
            color: #999;
            min-width: 80px;
          }
          
          .detail-value {
            font-size: 12px;
            color: #333;
          }
        }
      }
      
      .rule-actions {
        display: flex;
        gap: 8px;
      }
    }
  }
}

.notification-settings {
  background: white;
  padding: 16px;
  flex: 1;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
  }
  
  .settings-list {
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .setting-info {
        flex: 1;
        min-width: 0;
        
        .setting-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }
        
        .setting-desc {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}

.add-rule-modal {
  width: 90vw;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  
  .modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .modal-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }
  
  .modal-actions {
    padding: 20px;
    display: flex;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
    
    .u-button {
      flex: 1;
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .page-header {
    padding: 12px;
  }
  
  .alarm-stats,
  .alarm-rules,
  .notification-settings {
    padding: 12px;
  }
  
  .stat-card {
    padding: 12px;
    
    .stat-number {
      font-size: 20px;
    }
  }
  
  .rule-item {
    padding: 12px;
  }
}

@media screen and (min-width: 414px) {
  .alarm-setting-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style>
